<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../baselayout/import.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="${staticPath}/assets/css/highcharts.css">
<title>详情</title>
</head>
<body>
	<div id="scc">	
	</div>
</body>
<input type="hidden" name="figure_type" value="${figureType} ">
<input type="hidden" name="title" value="${title}">
<input type="hidden" name="sub_title" value="${subTitle}">


<input type="hidden" name="yAxis_name" value="${yName}">

<input type="hidden" name="pie_data">

<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
<script src="${staticPath}/assets/js/figure/highcharts.js"></script>

<c:forEach items="${x}" varStatus="i" var="item">
	<input type="hidden" name="x" value="${item}">
</c:forEach>

<c:forEach items="${y}" varStatus="i" var="item">
	<c:forEach items="${item}" var="v">
		<input type="hidden" name="y" value="${v}">
	</c:forEach>	
</c:forEach>

<c:forEach items="${z}" varStatus="i" var="item">
	<input type="hidden" name="z" value="${item}">
</c:forEach>

<input type="hidden" name="name=sub_title" value="${subTitle}">

<script type="text/javascript">
$(function () {
	var title = $("input[name=title]").val();
	var sub_title = $("input[name=sub_title]").val();
	var y_name = $("input[name=yAxis_name]").val();
	var serie_name  = $("input[name=series_name]").val();
	
	var x = $("input[name=x]").map(function(idex,item,arr){
		return item.value;
	}).get();
	var y = $("input[name=y]").map(function(idx,item,arr){
		return parseInt(item.value);
	}).get();
	var z = $("input[name=z]").map(function(idx,item,arr){
		return item.value;
	}).get();
	var num = z.length;
	var series = new Array();
	for(var idx = 0;idx<num;idx++){
		series.push({
			  name: z[idx],
	          data: y.slice(idx,idx+x.length)
	     });
	}
	
	var yName = $("input[name=yAxis_name]").val();

    $('#scc').highcharts({
    	chart: {
            type: 'column'
        },
        title: {
            text: title
        },
        xAxis: {
            categories: x
        },
        yAxis: {
            min: 0,
            title: {
                text: sub_title
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: series

    });
      
});


</script>
</html>